<template>
  <HomePannel ref="target" title="人气推荐" subTitle="人气爆款 不容错过">
    <template #right>
      <XtxMore />
    </template>
    <!-- <ul class="goods-list">
      <li v-for="item in hotList" :key="item.id">
        <RouterLink to="/">
          <img :src="item.picture" alt="" />
          <p class="name">{{ item.title }}</p>
          <p class="desc">{{ item.alt }}</p>
        </RouterLink>
      </li>
    </ul> -->
    <HomeList :goods="hotList" />
  </HomePannel>
</template>

<script>
import HomePannel from './home-panel.vue'
import { findHot } from '@/api/home'
import { ref } from 'vue'
import HomeList from './home-list.vue'
import { useObserver } from '@/hooks'

export default {
  components: {
    HomePannel,
    HomeList
  },
  setup () {
    const hotList = ref([])
    const getHotList = async () => {
      const { result } = await findHot()
      console.log(result)
      hotList.value = result
    }
    // onMounted(() => {
    //   getHotList()
    // })
    // 调用监控函数
    const { target } = useObserver(getHotList)

    return { hotList, target }
  }
}
</script>
